<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" onclick="clearcon()">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑龙江省科技资源管理系统</title>
<base href="<%=basePath%>" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/select.css" rel="stylesheet" type="text/css" />
<link href="css/float.css" rel="stylesheet" type="text/css" />
<script src="js/tab.js"></script>
<!-- <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gkhZkvMMhPRMs1ybtbM7nmhH1ryHr6Dp"></script>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css"
	rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/searchInRectangle.js"></script>
</head>

<body onload="initMap();">
	<div id="main">
		<div class="top">
			<div class="logo">
				<a href="#"><img src="images/logo.jpg" width="360" height="85" />
				</a>
			</div>
			<div class="search">
				<div class="sea_con">
					<ul class="list">
						<li class="current"><a id='a2' href="instrument/dxyq.ins">仪器信息</a></li>
						<li><a id='a2' href="institution/dw.ins">机构信息</a></li>
						<li><a id='a2' href="project/xm.ins">检测项目</a></li>
						<li><a id='a2' href="talent/ry.ins">人才信息</a></li>
<!-- 						<li><a id='a2' href="result/cg.ins">成果信息</a></li> -->
						<li><a id='a2' href="base/syjd.ins">基地信息</a></li>
<!-- 						<li><a id='a2' href="analysis/fx.ins">测试分析</a></li> -->
					</ul>
				</div>
			</div>
		</div>
		<!--top end-->

		<div class="content">
			<div class="left" id="left">

				<!--统计及查询切换 -->
				<p class="act_top" id="tab_search">
					<a href="instrument/yqcx.ins" id="search1_list"
						onclick="tabs3('search',1,2,'list')" class="current">内容搜索</a> <a
						href="instrument/dxyq.ins" id="search2_list"
						onclick="tabs3('search',2,2,'list')">统计信息</a>
				</p>

				<!--显示弹出框-->
				<div class="table_action" id="height">
					<div class="table_list1 table_list" id="news_cont1_list"
						style='display: none'>
						<div class="table_text">
							<div class="button">
								<a id="daohang"></a> <a href="javaScript:void(0)"
									onclick="closeDis()" class='button_a'>关闭 </a> <a
									href="javaScript:void(0)" class='button_a' id="fanhui"
									onclick="window.history.back();">返回 </a> <a
									href="javaScript:void(0)" id="dayin"
									onclick="return printiframe();" class='button_a'>打印 </a>
							</div>
							<div class="iframe_table">
								<iframe id="iframe" name="layer_iframe" src="" scrolling="yes"
									height="100%" width="615px" frameborder="0"></iframe>
							</div>
						</div>
					</div>
				</div>

				<!--查询条件 -->
				<div class="search_con" id="height">
					<fieldset style="width: 270px">
						<legend>
							<strong>仪器名称</strong>
						</legend>
						<li class="text_li">
							<p class="bt" align="left">
								<strong>方式</strong>&nbsp&nbsp
								<label><input type="radio" id="yqmccxfs" name="yqmccxfs" value="1" /><strong>全匹配</strong>&nbsp</label>
								<label><input type="radio" id="yqmccxfs" name="yqmccxfs" value="3" /><strong>局部匹配</strong></label>
								<label><input type="radio" id="yqmccxfs" name="yqmccxfs" checked value="2" /><strong>模糊</strong></label>
							</p>
						</li>
						<ul>
							<li class="text_li"><input style="width: 240px" type="text"
								name="gdyqmc" id="hljyqmc"
								onkeyup="findcon('hljyqmc','popup1','con_ul1')" value=""></input>
							</li>
						</ul>
						<div id="popup1" align=left>
							<ul id="con_ul1"></ul>
						</div>
						<br />
					</fieldset>
					
<!-- 					<p class="bt" align="left"> -->
<!-- 						<strong>所属机构</strong> -->
<!-- 					</p> -->
<!-- 					<ul> -->
<!-- 						<li class="text_li"><input style="width: 250px" type="text" -->
<!-- 							name="gdssdw" id="hljssjg" -->
<!-- 							onkeyup="findcon('hljssjg','popup2','con_ul2')" value=""></input> -->
<!-- 						</li> -->
<!-- 					</ul> -->
<!-- 					<div id="popup2" align=left> -->
<!-- 						<ul id="con_ul2"></ul> -->
<!-- 					</div> -->
					
					<fieldset style="width: 270px">
						<legend>
							<strong>所属机构</strong>
						</legend>
						<li class="text_li">
							<p class="bt" align="left">
								<strong>方式</strong>&nbsp&nbsp
								<label><input type="radio" id="ssjgcxfs" name="ssjgcxfs" value="1" /><strong>全匹配</strong>&nbsp</label>
								<label><input type="radio" id="ssjgcxfs" name="ssjgcxfs" value="3" /><strong>局部匹配</strong></label>
								<label><input type="radio" id="ssjgcxfs" name="ssjgcxfs" checked value="2" /><strong>模糊</strong></label>
							</p>
						</li>
						<ul>
							<li class="text_li"><input style="width: 240px" type="text"
								name="gdssdw" id="hljssjg"
								onkeyup="findcon('hljssjg','popup2','con_ul2')" value=""></input>
							</li>
						</ul>
						<div id="popup2" align=left>
							<ul id="con_ul2"></ul>
						</div>
						<br />
					</fieldset>
					
					<p class="bt" align="left">
						<strong>类型</strong>
					</p>
					<ul>
						<li class="text_li">
							<p>
								<select class="text" id="yqlx" name="yqlx" style="width: 250px">
									<option value=""></option>
									<c:forEach var="instrumentType" items="${instrumentTypeList}">
										<option value="${instrumentType}">${instrumentType}</option>
									</c:forEach>
								</select>
							</p>
						</li>
					</ul>
					<p class="bt" align="left">
						<strong>产地</strong>
					</p>
					<ul>
						<li class="text_li">
							<p>
								<select class="text" id="yqcd" name="yqcd" style="width: 250px">
									<option value=""></option>
									<c:forEach var="instrumentHome" items="${instrumentHomeList}">
										<option value="${instrumentHome}">${instrumentHome}</option>
									</c:forEach>
								</select>
							</p>
						</li>
					</ul>
					<p class="butten_other">
						<a href="javascript:submit();"><img src="images/butten2.jpg"
							width="37" height="23" /> </a>
					</p>
				</div>
			</div>
			<!--left end-->


			<div class="con_right" id="right">

				<!--图例 -->
				<div class="r_top">
					<a href="javascript:pr()" class="sj_icon"><img id="xs"
						src="images/icon.jpg" /> </a>
					<p class="city_f" id="curzt"></p>
					<p class="city_l" id="tl"></p>
				</div>

				<!--地图 -->
				<div class="map">
					<div id="container" style="width: 100%; height: 700px;"></div>
				</div>
			</div>
			<!--rigth end  -->

		</div>
	</div>
	<!--main end-->
</body>
</html>
<script type="text/javascript">
	function changeCurZtAndtl(loctype) {
		if (loctype == "province") {
			$("#curzt").html("<a href=\"#\" onclick=\"return findQuyu('province')\"><font color='red'>省</font></a>>><a href=\"#\" onclick=\"return findQuyu('city')\">市</a>>><a href=\"#\" onclick=\"return findQuyu('danwei')\">单位</a>");
			$("#tl").html("<a ><img src = 'image/red.gif' width=12  height=15/>500台以上<img src = 'image/blue.gif' width=12  height=15/>100台到500台<img src = 'image/green.gif' width=12  height=15/>0台到100台</a>");

		}
		if (loctype == "city") {
			$("#curzt").html("<a href=\"#\" onclick=\"return findQuyu('province')\">省</a>>><a href=\"#\" onclick=\"return findQuyu('city')\"><font color='red'>市</font></a>>><a href=\"#\" onclick=\"return findQuyu('danwei')\">单位</a>");
			$("#tl").html("<a ><img src = 'image/red.gif' width=12  height=15/>500台以上<img src = 'image/blue.gif' width=12  height=15/>100台到500台<img src = 'image/green.gif' width=12  height=15/>0台到100台</a>");
		}
// 		if (loctype == "xian") {
// 			$("#curzt").html("<a href=\"#\" onclick=\"return findQuyu('province')\">省</a>>><a href=\"#\" onclick=\"return findQuyu('city')\">市</a>>><a href=\"#\" onclick=\"return findQuyu('xian')\"><font color='red'>区县</font></a>>><a href=\"#\" onclick=\"return findQuyu('danwei')\">单位</a>");
// 			$("#tl").html("<a ><img src = 'image/red.gif' width=12  height=15/>200台以上<img src = 'image/blue.gif' width=12  height=15/>50台到100台<img src = 'image/green.gif' width=12  height=15/>0台到50台</a>");
// 		}
		if (loctype == "danwei") {
			$("#curzt").html("<a href=\"#\" onclick=\"return findQuyu('province')\">省</a>>><a href=\"#\" onclick=\"return findQuyu('city')\">市</a>>><a href=\"#\" onclick=\"return findQuyu('danwei')\"><font color='red'>单位</font></a>");
			$("#tl").html("");
		}
	}
</script>

<script>

	//创建httprequest对象
	var xmlHttpRequest;
	var para; //用户输入的参数 
	function submit() {
		//创建xmlhttpresquest对象
		var yqmc = $("#hljyqmc").val();
		var ssdw = $("#hljssjg").val();
		var yqmccxfs = $("input[name='yqmccxfs']:checked").val();
		var ssjgcxfs = $("input[name='ssjgcxfs']:checked").val();
		var yqlx = $("#yqlx").val();
		var yqcd = $("#yqcd").val();
		/**
		 * yqmc : 仪器名称
		 * ssdw ： 所属单位
		 * yqmccxfs ： 仪器名称查询方式
		 */
		para = "yqmc=" + yqmc + "&ssdw=" + ssdw + "&yqmccxfs=" + yqmccxfs + "&ssjgcxfs=" + ssjgcxfs+ "&yqlx="+yqlx + "&yqcd="+yqcd;
		curlevel = 6;
		curcenterlng = 128.91077;
		curcenterlat = 48.734684;
		map.clearOverlays();
		getBoundary(); //圈出黑龙江省 
		var point = new BMap.Point(curcenterlng, curcenterlat); //创建点坐标   
		map.centerAndZoom(point, curlevel); //初始化地图，设置中心点坐标和地图级别
		changeCurZtAndtl("danwei");
		displaydetail("", "province", para);
		xmlHttpRequest = createXMLHttpRequest();
		xmlHttpRequest.open("POST", "instrument/getInstitution.ins", true);
		xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttpRequest.onreadystatechange = processDanwei;
		xmlHttpRequest.send("loctype=danwei&" + para);
		addeventlistener(); //点击确定后添加监听 
	}
	function displaydetail(quyu, loctype, para) {
		console.log(para);
		var src = "instrument/dxyqcxtable1.ins?" + para + "&quyu=" + quyu + "&loctype=" + loctype+"&ssdwcxfs=1";
		//var src = "instrument/dxyqcxtable1.ins?" + para + "&quyu=" + quyu + "&loctype=" + loctype;
		$("#iframe").attr("src", encodeURI(src));
		$("#news_cont1_list").show("slow");
		return false;
	}
	function addeventlistener() {
		map.addEventListener("zoomend", function() {
			//获取当前地图层级
			var zoomlevel = map.getZoom();
			//按省市级别查找
			if (zoomlevel <= 7) {
				findyqcx("province");
			}

			//按城市级别查找
			if (zoomlevel == 8) {
				findyqcx("city");
			}

			//按县级别查找
// 			if (zoomlevel == 9) {
// 				findyqcx("xian");
// 			}

			//按单位级别
			if (zoomlevel >= 9) {
				findyqcx("danwei");
			}
		});
	}
	function findQuyu(loctype) {
		if (loctype == "province") {
			curlevel = 7;
		}
		if (loctype == "city") {
			curlevel = 8;
		}
// 		if (loctype == "xian") {
// 			curlevel = 9;
// 		}
		if (loctype == "danwei") {
			curlevel = 10;
		}
		map.clearOverlays();
		getBoundary(); //圈出广东省 
		map.centerAndZoom(map.getBounds().getCenter(), curlevel); // 初始化地图，设置中心点坐标和地图级别		
		changeCurZtAndtl(loctype); //改变地图上方的地标
		return false;
	}
	function findyqcx(loctype) {
		map.clearOverlays();
		getBoundary(); //圈出广东省 
		changeCurZtAndtl(loctype);
		encodeURI("loctype=" + loctype + "&" + para);
		xmlHttpRequest = createXMLHttpRequest();
		xmlHttpRequest.open("POST", "instrument/getInstitution.ins", true);
		xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttpRequest.onreadystatechange = processDanwei;
		xmlHttpRequest.send("loctype=" + loctype + "&" + para);
	}
	/*
	处理返回信息函数
	*/
	function processDanwei() {
		if (xmlHttpRequest.readyState == 4) {
			if (xmlHttpRequest.status == 200) {
				var res = xmlHttpRequest.responseText;
				var locations = res.split("|");
				if (locations[0] != "")
					for (i = 0; i < locations.length; i++) {
						var temp = locations[i].split(",");
						temp[4] = temp[4].replace(/(^\s*)|(\s*$)/g, "");
						showPoint(temp[0], temp[1], temp[2], temp[3], temp[4]);
				}
			}
		}
	}

	//地图对象
	var map = null;
	var curlevel = null;
	var curcenterlng = null;
	var curcenterlat = null;
	/*
	初始化地图
	*/
	function initMap() {
		curlevel = 6;
		curcenterlng = 128.91077;
		curcenterlat = 48.734684;
		//创建地图
		map = new BMap.Map("container", {
			minZoom : 5
		});
		var point = new BMap.Point(curcenterlng, curcenterlat); // 创建点坐标   
		map.centerAndZoom(point, curlevel); // 初始化地图，设置中心点坐标和地图级别
		//地图控件
		changeCurZtAndtl("province");
		map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放   
		map.enableKeyboard(); // 开启键盘控制   
		map.enableContinuousZoom(); // 开启连续缩放效果   
		map.enableInertialDragging(); // 开启惯性拖拽效果
		map.enableDragging(); //开启拖拽效果  
		map.addControl(new BMap.NavigationControl({
			type : BMAP_NAVIGATION_CONTROL_ZOOM
		}));
		map.addControl(new BMap.ScaleControl());
// 		map.addControl(new BMap.OverviewMapControl());
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
		getBoundary(); //圈出广东省 
		map.addEventListener("zoomend", function() {
			//获取当前地图层级
			var zoomlevel = map.getZoom();

			//按省市级别查找
			if (zoomlevel <= 7) {
				changeCurZtAndtl("province");
			}

			//按城市级别查找
			if (zoomlevel == 8) {
				changeCurZtAndtl("city");
			}

			//按县级别查找
// 			if (zoomlevel == 9) {
// 				changeCurZtAndtl("xian");
// 			}

			//按单位级别
			if (zoomlevel >= 9) {
				changeCurZtAndtl("danwei");
			}
		});
	}

	/*
	在地图上显示数据
	*/
	function showPoint(quyu, zhongshu, x, y, loctype) {
		var image = getImage(zhongshu, loctype, "hljdxyq");
		var myIcon = new BMap.Icon(image, new BMap.Size(20, 25), {
			anchor : new BMap.Size(15, 5)
		});
		var point = new BMap.Point(x, y);
		var marker = new BMap.Marker(point, {
			icon : myIcon
		});
		marker.addEventListener("click", function() {
			var opts = {
				width : 300, // 信息窗口宽度   
				height : 150, // 信息窗口高度   
				title : "<h><strong> 来自 " + quyu + "<br> 满足您选择的大型仪器信息统计" + "</strong></h><br>",
			}
			var message = "<table align=left>" +
				"<tr align=left><td >大型仪器总数:</td><td><a href=\'javascript:void(0);\' onclick=\"displaydetail('" + quyu + "','" + loctype + "','" + para + "');\">" + zhongshu + "台</a></td></tr>" +
				"</table>";
			var window = new BMap.InfoWindow(message, opts);
			map.openInfoWindow(window, point);
		});
		map.addOverlay(marker);
	}
</script>
